<template>
  <div style="text-align: center;background-color: #f1f1f3;height: 100%;padding: 0px;margin: 0px;">
    <h1 style="font-size: 50px;">{{ '欢迎你！' + user.username }}</h1>
    <!--<el-descriptions title="个人中心" :column="2" size="40" border>-->
    <!--  <el-descriptions-item>-->
    <!--    <template slot="label">-->
    <!--      <i class="el-icon-s-custom"></i>-->
    <!--      账号-->
    <!--    </template>-->
    <!--    <el-input v-model="user.no" :disabled="disabled"></el-input>-->
    <!--  </el-descriptions-item>-->

    <!--  <el-descriptions-item>-->
    <!--    <template slot="label">-->
    <!--      <i class="el-icon-mobile-phone"></i>-->
    <!--      电话-->
    <!--    </template>-->
    <!--    <el-input v-model="user.phone" :disabled="disabled"></el-input>-->
    <!--  </el-descriptions-item>-->
    <!--  <el-descriptions-item>-->
    <!--    <template slot="label">-->
    <!--      <i class="el-icon-location-outline"></i>-->
    <!--      性别-->
    <!--    </template>-->
    <!--    <el-select v-model="user.sex" :disabled="disabled">-->
    <!--      <el-option label="男" value="1"></el-option>-->
    <!--      <el-option label="女" value="2"></el-option>-->
    <!--    </el-select>-->
    <!--  </el-descriptions-item>-->
    <!--  <el-descriptions-item>-->
    <!--    <template slot="label">-->
    <!--      <i class="el-icon-tickets"></i>-->
    <!--      角色-->
    <!--    </template>-->
    <!--    <el-select v-model="user.roleId" :disabled="disabled">-->
    <!--      <el-option label="超级管理员" value="0"></el-option>-->
    <!--      <el-option label="信息管理员" value="1"></el-option>-->
    <!--      <el-option label="用户" value="2"></el-option>-->
    <!--    </el-select>-->
    <!--  </el-descriptions-item>-->
    <!--</el-descriptions>-->
    <el-descriptions title="个人中心" :column="2" size="small" border>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-s-custom"></i>
          账号
        </template>
        <el-input v-model="user.username" :disabled="disabled"></el-input>
      </el-descriptions-item>

      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-user"></i>
          昵称
        </template>
        <el-input v-model="user.nickname" :disabled="disabled"></el-input>
      </el-descriptions-item>

      <el-descriptions-item>
        <template slot="label" >
          <i class="el-icon-lock" ></i>
          密码
        </template>
        <el-input v-model="user.password" :disabled="disabled" show-password></el-input>
      </el-descriptions-item>

      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-date"></i>
          年龄
        </template>
        <el-input v-model.number="user.age" :disabled="disabled" type="number"></el-input>
      </el-descriptions-item>

      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-view"></i>
          介绍
        </template>
        <el-input v-model="user.introduction" :disabled="disabled"></el-input>
      </el-descriptions-item>

      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-gender"></i>
          性别
        </template>
        <el-select v-model="user.sex" :disabled="disabled">
          <el-option label="男" value="1"></el-option>
          <el-option label="女" value="2"></el-option>
        </el-select>
      </el-descriptions-item>
      <!--      <el-descriptions-item>-->
      <!--        <template slot="label">-->
      <!--          <i class="el-icon-gender"></i>-->
      <!--          角色-->
      <!--        </template>-->
      <!--        <el-select v-model="user.roleId" :disabled="disabled">-->
      <!--          <el-option label="超级管理员" value="0"></el-option>-->
      <!--          <el-option label="信息管理员" value="1"></el-option>-->
      <!--          <el-option label="用户" value="2"></el-option>-->
      <!--        </el-select>-->




      <!--      </el-descriptions-item>-->
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-gender"></i>
          角色
        </template>
        <template>
          <el-tag :type="user.usertype === 0 ? 'danger' : (user.usertype === 1 ? 'primary' : 'success')" disable-transitions>
            {{ user.usertype === 0 ? '管理员' : '商家' }}
          </el-tag>

        </template>
      </el-descriptions-item>
      <!--      <template v-slot="scope">-->
      <!--        <el-tag-->
      <!--            :type="scope.row.roleId === 0 ? 'danger' : (scope.row.roleId === 1 ? 'primary' : 'success')"-->
      <!--            disable-transitions>{{scope.row.roleId === 0 ? '超级管理员' :-->
      <!--            (scope.row.roleId === 1 ? '信息管理员' : '用户')}}</el-tag>-->
      <!--      </template>-->
    </el-descriptions>
    <i class="el-icon-edit icon-large" @click="edit">编辑</i>
    <i v-if="!disabled" class="el-icon-check icon-large" style="cursor: pointer; color: #409EFF;" @click="handleOk">保存</i>

    <!--    <el-button type="primary" @click="edit">编辑</el-button>-->
    <!--    <el-button v-if="!disabled" type="primary" @click="handleOk">保存</el-button>-->
    <DateUtils></DateUtils>
  </div>
</template>

<script>
import DateUtils from "./DateUtils";

export default {
  name: "Home",
  components: {DateUtils},
  data() {

    return {
      // user: {
      //   no: '',
      //   phone: '',
      //   sex: '',
      //   roleId: ''
      // },
      disabled: true,

      user: {}
    }
  },
  computed: {},
  methods: {
    init() {
      this.user = JSON.parse(sessionStorage.getItem('CurUser'))
    },
    edit(){
      //编辑
      this.disabled=false
    },
    handleOk() {

      this.$axios.post(this.$httpUrl + '/user/mod', this.user).then(res => res.data).then(res => {
        console.log("'")
        console.log(res)
        if (res) {
          sessionStorage.setItem("CurUser",JSON.stringify(this.user))
          // this.user = res.data
          this.disabled = true
        } else {
          alert('获取数据失败')
        }
      })


      // this.$axios.post(this.$httpUrl + '/user/mod', {
      //   pageSize: this.pageSize,
      //   pageNum: this.pageNum,
      //   param: this.user
      // }).then(res => res.data).then(res => {
      //   console.log(res)
      //   if (res.code == 200) {
      //     this.user = res.data
      //     this.disabled = true
      //   } else {
      //     alert('获取数据失败')
      //   }
      // })
      // // 发送请求接口来获取数据
      // // 假设接口返回的数据为response
      // const response = {
      //   no: '123',
      //   phone: '123456789',
      //   sex: '1',
      //   roleId: '0'
      // };
      //
      // // 将接口返回的数据赋值给user对象
      // this.user = response;
      //
      // // 将disabled属性设置为false，使输入框和下拉框变为可编辑状态
      // this.disabled = false;
    }
  },
  created() {
    this.init()
  }
}
</script>

<style scoped>
.el-descriptions {
  width: 90%;

  margin: 0 auto;
  text-align: center;
}
.icon-large {
  font-size: 24px; /* 设置适当的大小 */
//background-color:  #80ccff;
  margin-top: 20px;
  margin-left: 20px; /* 左边距 */
  margin-right: 20px; /* 右边距 */
}

</style>
